<template>
   <HomePanel ref="target" title="人气好物" subTitle="新鲜出炉 品质靠谱">
       <template #right>
           <XtxMore/>
       </template>
    <!-- 数据图片 -->
    <HomePrice :priceList="hotList"/>
   </HomePanel>
</template>

<script>
import HomePanel from './home-panel.vue'
import { findHot } from '@/api/home'
import { ref } from 'vue'
import HomePrice from './home-price.vue'
// import { useIntersectionObserver } from '@vueuse/core'
import { useObserver } from '@/hooks/index'
export default {
  name: 'xtxHomeNew',
  components: {
    HomePanel,
    HomePrice
  },
  setup () {
    const hotList = ref([])
    const getHotList = async () => {
      const { result } = await findHot()
      //   console.log(result)
      hotList.value = result
    }

    const { target } = useObserver(getHotList)
    // onMounted(() => {
    //   getHotList()
    // })
    // const target = ref(null)
    // const { stop } = useIntersectionObserver(
    //   target,
    //   ([{ isIntersecting }], observerElement) => {
    //     // targetIsVisible.value = isIntersecting
    //     console.log(isIntersecting)
    //     // 判断是不是懒加载
    //     if (isIntersecting) {
    //       // 是懒加载调用接口
    //       getHotList()
    //       //   停止懒加载
    //       stop()
    //     }
    //   }
    // )
    return { hotList, target }
  }
}
</script>

<style scoped lang='less'>

</style>
